<template>
  <div>
    <div class="tabs-bar">
      <form>
        <van-search v-model="KKScode" placeholder="请输入KKS码" @search="onSearch" @cancel="onCancel" />
      </form>
      <van-tabs v-model="active">
        <van-tab title="设备基础数据"></van-tab>
        <van-tab title="历史维修数据"></van-tab>
      </van-tabs>
    </div>
    <div v-show="active === 0">
      <div v-if="!(equipmentInfoCount === 0)">
        <van-list>
          <van-cell>
            KKScode:
            <span>{{equipmentInfo.KKScode}}</span>
          </van-cell>
          <van-cell>
            <van-field v-model="location" center clearable label="厂房位置:" placeholder="请输入厂房位置..."></van-field>
          </van-cell>
          <van-cell>
            专业部门:
            <span>{{equipmentInfo.department}}</span>
          </van-cell>
          <van-cell>
            设备型号:
            <span>{{equipmentInfo.unitType}}</span>
          </van-cell>
          <van-cell>
            <van-field
              readonly
              clickable
              label="设备等级:"
              :value="value"
              placeholder="选择设备等级..."
              @click="showPicker = true"
            />
          </van-cell>
          <van-cell>设备名称:</van-cell>
          <van-cell>
            <van-checkbox-group v-model="result">
              <van-checkbox
                v-for="(item,index) in equipmentTypeList"
                :key="index"
                :name="item"
              >{{item}}</van-checkbox>
            </van-checkbox-group>
          </van-cell>
        </van-list>
        <van-button type="primary" @click="submitEquipmentData()">保存</van-button>
      </div>
      <div v-else>
        <noData />
      </div>
    </div>
    <div v-show="active === 1">
      <van-list>
        <van-cell v-for="item in equipmentInfo.historyList" :key="item.id">
          <span>{{item.id}}</span>
          <br />
          <span>{{item.packageState}}</span>
          <br />
          <span>{{item.description}}</span>
          <br />
          <span>{{item.leader}}</span>
          <br />
          <span>{{item.finishTime}}</span>
          <br />
        </van-cell>
      </van-list>
    </div>
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        @cancel="showPicker = false"
        @confirm="onConfirm"
      />
    </van-popup>
  </div>
</template>

<script>
import noData from "@/components/no-data.vue";
import { equipmentInfo,equipmentSubmit } from "@/api/data";
import { normalize } from "path";
import {Dialog} from 'vant'

export default {
  data() {
    return {
      KKScode: "",
      active: 0,
      equipmentTypeList: [
        "解体吊点",
        "解体平台",
        "解体保温",
        "解体场地",
        "维护吊点",
        "维护平台",
        "维护保温",
        "维护场地"
      ],
      columns: ["一般设备 RTF", "重要设备 NC", "关键2级设备 CC2"],
      equipmentInfo: {},
      location: "",
      result: [],
      historyList: [],
      value: "",
      showPicker: false
    };
  },
  computed:{
    equipmentInfoCount(){
      return Object.keys(this.equipmentInfo).length
    }
  },
  methods: {
    onSearch() {
      equipmentInfo().then(res => {
        this.equipmentInfo = res.data;
        console.log(res);
      });
    },
    onConfirm(value) {
      this.value = value;
      this.showPicker = false;
    },
    onCancel() {},
    submitEquipmentData() {
      let submitData = {
        KKScode:this.KKScode,
        location:this.location,
        level:this.value,
        equipmentType:this.result
      };
      equipmentSubmit(submitData).then(res=>{
        console.log(res);
      })
    }
  },

  components: {
    noData
  }
};
</script>

<style lang="less" scoped>
.van-cell {
  align-items: center;
}

.van-cell.van-cell--clickable.van-field {
  padding: 0;
}

.van-cell.van-cell--center.van-field {
  padding: 0;
}

.van-field__label {
  width: 70px;
}

.van-checkbox {
  width: 50%;
  float: left;
}
</style>